<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 35</title>
    <style>
        div {
            font-size: 66px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div>
</body>
<script>
    // ref  reactive响应式的引用
    // 原理，通过proxy，对数据进行封装，当数据发生变化时，触发模板等内容的更新
    // ref 处理基础类型的数据
    const app = Vue.createApp({

        setup(props, context) {
           /* const {ref} = Vue;
            // proxy， ’张三‘变成proxy({value: '张三'}) 这样的一个响应式引用
            let name = ref('张三')
            setTimeout(() => {
                name.value = '李四'
            }, 2000)*/

            const {reactive,toRefs,readonly} = Vue;
            // proxy， {name : 'dell'}变成proxy({name: '李四'}) 这样的一个响应式引用
            const nameObj = reactive({name: 'dell'})
            setTimeout(() => {
                nameObj.name = 'lee'
            }, 2000)

            //toRefs proxy({name: 'dell'}), {name: proxy({value: 'dell'})}
            const {name} = toRefs(nameObj);
            // 把界面需要的参数都导出一份，界面可以直接使用
            return {name}


        },

        // created 实例被完全初始化之前
        template: `
          <div @click="handleClick">{{ name }}</div>
        `
    });


    const vm = app.mount('#root');
</script>
</html>